<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let与var的区别</title>
    <script>
        function f1(){
            // 1.let的变量名不能重复
            // redeclaration of let name
            // let name = "admin";
            let name = "alice";

            // 2.let存在作用域的概念
            // 变量只能在对应的作用域中使用
            for(let i = 0; i < 10; i++){

            }

            // i的作用域在for循环中
            // 出了for循环相当于没有定义i
            // 因此报错:Uncaught ReferenceError: i is not defined
            // console.log(i);

            // 3.不存在变量提升
                // 变量提升:表示将变量的声明提升到最先的位置
            // 由于不存在变量提升
            // 因此a的声明在打印之后
            // 打印的时候并没有a
            // 因此直接报错
            // Uncaught ReferenceError: can't access lexical declaration 'a' before initialization
            console.log(a);
            let a = 10;

        }
        function f2(){
            // 1.var的变量名可以重复
            var name = "admin";
            console.log(name);
            var name = "alice";
            console.log(name);

            // 2.var不存在作用域的概念
            // 变量出了作用域之后仍然可以使用
            for(var i = 0; i < 10; i++){

            }
            // 当i=10的时候会出for循环
            // 因此,此时的i的值为10
            console.log(i);

            // 3.存在变量提升
                // 变量提升:表示将变量的声明提升到最先的位置

            // 当直接打印a的时候
            // 由于当前函数中没有声明过a,因此报错
            // Uncaught ReferenceError: a is not defined
            // console.log(a);

            // 此时再次打印a,发现没有报错
            // 只是其值为undefined
            // 这时候存在了变量提升
            console.log(a);
            var a = 10;

            // 上述代码通过变量提升变成了下面的代码
            // 通过变量提升,将变量的声明提升到了最先的位置
            // 该位置必然处于console.log(a)之前
            // 此时相当于已经声明过a,只是没有赋值
            // 因此,此时a的值为undefined
            var a;
            console.log(a);
            a = 10;


        }
    </script>
</head>
<body>
<button onclick="f1()">let用法</button><br/>
<button onclick="f2()">var用法</button><br/>
</body>
</html>